<template>
  <div class="search-detail">
    <van-tabs v-model:active="searchActive" animated swipeable>
      <van-tab title="单曲">
        <van-list
          v-model:loading="listState.songLoading"
          :finished="listState.songFinished"
          finished-text="没有更多了"
          @load="songLoad"
        >
          <fs-song-item
            v-for="(item, index) in listState.musicList"
            :music-detail="item"
            :key="index"
            :order="index + 1"
            :is-search="true"
            color="#fff"
            @play-muisc="handlePlayMusic"
            light-color="rgba(255, 255, 255, 0.8)"
          ></fs-song-item>
        </van-list>
      </van-tab>
      <van-tab title="歌单">
        <van-list v-model:loading="listState.playLoading" :finished="listState.playFinished" @load="playLoad">
          <fs-play-item
            v-for="(item, index) in listState.playList"
            :play-detail="item"
            :key="index"
            color="#fff"
            light-color="rgba(255, 255, 255, 0.8)"
          ></fs-play-item>
        </van-list>
      </van-tab>
      <van-tab title="歌手">
        <van-list v-model:loading="listState.singerLoading" :finished="listState.singerFinished" @load="singerLoad">
          <fs-singer-item
            v-for="(item, index) in listState.singerList"
            :singer-detail="item"
            :key="index"
            color="#fff"
          ></fs-singer-item> </van-list
      ></van-tab>
      <van-tab title="专辑">
        <van-list v-model:loading="listState.albumLoading" :finished="listState.albumFinished" @load="albumLoad">
          <fs-album-item
            v-for="(item, index) in listState.albumList"
            :album-detail="item"
            :key="index"
            color="#fff"
            light-color="rgba(255, 255, 255, 0.8)"
          ></fs-album-item> </van-list
      ></van-tab>
    </van-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import mitter from "@/utils/mitt";
import FsPlayItem from "@/components/FsPlayItem/FsPlayItem.vue";
import FsSongItem from "@/components/FsSongItem/FsSongItem.vue";
import FsSingerItem from "@/components/FsSingerItem/FsSingerItem.vue";
import FsAlbumItem from "@/components/FsAlbumItem/FsAlbumItem.vue";
import { searchAlbum, searchMusic, searchMusicList, searchSinger } from "@/service/api/musicRequest";
import type { ISearchSongItem } from "@/types/music/searchSongType";
import type { ISongListItem } from "@/types/music/songLIstType";
import type { IAlbumItem } from "@/types/music/albumType";
import type { ISingerItem } from "@/types/music/singerType";
const props = defineProps<{
  searchContent: string;
}>();

const searchActive = ref(0);

const songPayload = reactive({
  limit: 20,
  offset: 0,
});
const playPayload = reactive({
  limit: 20,
  offset: 0,
});
const singerPayload = reactive({
  limit: 20,
  offset: 0,
});

const albumPayload = reactive({
  limit: 20,
  offset: 0,
});

const listState = reactive({
  songLoading: false,
  songFinished: false,
  playLoading: false,
  playFinished: false,
  singerLoading: false,
  singerFinished: false,
  albumLoading: false,
  albumFinished: false,
  musicList: [] as ISearchSongItem[],
  playList: [] as ISongListItem[],
  singerList: [] as ISingerItem[],
  albumList: [] as IAlbumItem[],
});

const handlePlayMusic = (id: number) => {
  mitter.emit("playMusic", id);
};

const songLoad = () => {
  searchMusic({
    keywords: props.searchContent,
    limit: songPayload.limit,
    offset: songPayload.offset,
  }).then((res) => {
    listState.musicList.push(...res.result.songs);
    listState.songLoading = false;
    if (!res.result.hasMore) {
      listState.songFinished = true;
    } else {
      songPayload.offset += songPayload.limit;
    }
  });
};

const playLoad = () => {
  searchMusicList({ keywords: props.searchContent, limit: playPayload.limit, offset: playPayload.offset }).then(
    (res) => {
      listState.playList.push(...res.result.playlists);
      listState.playLoading = false;
      if (!res.result.hasMore) {
        listState.playFinished = true;
      } else {
        playPayload.offset += playPayload.limit;
      }
    }
  );
};

const singerLoad = () => {
  searchSinger({ keywords: props.searchContent, limit: singerPayload.limit, offset: singerPayload.offset }).then(
    (res) => {
      listState.singerList.push(...res.result.artists);
      listState.singerLoading = false;
      if (!res.result.hasMore) {
        listState.playFinished = true;
      } else {
        singerPayload.offset += singerPayload.limit;
      }
    }
  );
};

const albumLoad = () => {
  searchAlbum({
    keywords: props.searchContent,
    limit: albumPayload.limit,
    offset: albumPayload.offset,
  }).then((res) => {
    listState.albumList.push(...res.result.albums);
    listState.albumLoading = false;
    if (res.result.albumCount <= listState.albumList.length) {
      listState.albumFinished = true;
    } else {
      albumPayload.offset += albumPayload.limit;
    }
  });
};
</script>

<style scoped lang="scss">
.search-detail {
  width: 100%;
  :deep() {
    .van-tabs .van-tabs__wrap .van-tabs__nav {
      background: unset;
    }
    .van-tab {
      color: rgba(255, 255, 255, 0.8);
      font-size: 16px;
    }
  }
}
</style>
